<template>
  <view v-show="isShowPage" class="scl-result-container">
    <navigationBar :my-property="navigationBarDataInfo" />
   
    <view class="top-stick-wrapper-small" :style="{'top':stickTop+'rpx'}" v-show="smallMenuVisible">
      <view class="box-list">
        
      <view class="box-item" :class="['box-item-'+i]" v-for="(item,i) in multipackList" :key="i" @click="toTheTop(i)">
          <view class="abs-border" v-if="actBoxIndex === i">
            <image class="img" :src="staticImgs.smallBorderBg" mode=""></image>
          </view>
          <view :class="[!item.reportId ? 'abs-img-lock' : 'abs-img']">
            
            <image class="img" v-if="item.reportId" :src="item.multipackResultSmallImg" mode=""></image>
            <view v-else class="inset-block">
              <image class="img" :src="staticImgs.smallTestImg1" mode=""></image>
              <view class="abs-text">待解锁</view>
            </view>
            
          </view>

          <view class="text-box">
            {{item.boxTit}}
          </view>
        </view> 
        
      </view>
    </view>
    

    <view class="top-stick-wrapper" :style="{'top':stickTop+'rpx',backgroundImage:'url('+topBg+')'}">
      <view class="row-1">多维度专业分析</view>
      <view class="row-2">每个人都该拥有三种MBTI</view>
      <view class="row-3 box-list">
        <view class="box-item" v-for="(item,i) in multipackList" :key="i" @click="changeBox(i)">
          <view class="abs-border" v-if="actBoxIndex === i">
            <image class="img" :src="staticImgs.borderBg" mode=""></image>
          </view>
          <view :class="[item.reportId ? 'abs-img' : 'abs-img-lock']">
            <image v-if="item.reportId" class="img" :src="item.multipackResultImg" mode=""></image>
            <view v-else class="inset-block">
              <image class="img" :src="item.defBoxBg" mode=""></image>
              <image class="img-lock" :src="staticImgs.lockIcon" mode=""></image>
              <view class="abs-text">待解锁{{item.multipackResultImg}}</view>
            </view>
          </view>
          <!-- {{JSON.stringify(item)}} -->
          <view class="text-box">
            {{item.boxTit}} 
          </view>

        </view>
      </view>
    </view>

    <template v-if="pageComp === 'pageOCEAN'">
      <CustomSclResultOCEAN :otherMbtiHasDone="jobMbtiDone" :sclArr="multipackList" :otherId="jobSclId" :showCanvas="true" :pageData="pageData" />
    </template>
    <template v-else-if="pageComp === 'mbti'">
      <CustomSclResultMBTI :isDis="isDisPay" :qstnNum="qstnNum" :isXgMbti="actBoxCode=='character_mbti'" :otherMbtiHasDone="loveMbtiDone" :otherId="jobSclId" :showCanvas="true" :pageData="pageData" />
    </template>
    <template v-else-if="pageComp == 'def'">
      <NotOwnResultPageVue @change="changeSclStatus" :hasOwn="lackHasOwn" :scrollTopNum="scrollTopNum" :sclId="lackSclId" :code="actBoxCode" />
    </template>
    <template v-else-if="pageComp == 'def-love'">
      <notOwnLoveMbtiResultPage :scrollTopNum="scrollTopNum" :sclId="lackSclId"/>
    </template>
    <template v-else-if="pageComp == 'def-xg'">
      <notOwnXgMbtiResultPage :scrollTopNum="scrollTopNum" :sclId="lackSclId"/>
    </template>


    <view class="fixed-bottom-nav" v-if="actBoxCode=='character_mbti' && (qstnNum!=100 || (qstnNum && isDisPay)) && loadDataOk">
      <view class="box-btn left-btn" @click="toSclList">返回测评大厅</view>
      <view class="box-btn right-btn" @click="toPayScl">
        解锁32型人格报告
        <view class="tip-box"
          :style="{'backgroundImage':`url(${staticImgs.tipBg})`}"
          
        >
          更独特也更精准的测评结果
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    unescape,
    removeEmptyProperty
  } from '@/common/utils/util.js'
  import CustomSclResultMBTI from './CustomSclResultMoreMBTI.vue'
  import CustomSclResultOCEAN from './CustomSclResultOCEAN.vue'
  import NotOwnResultPageVue from './NotOwnResultPage.vue'
  import notOwnLoveMbtiResultPage from './not-own-love-mbti-result-page.vue'
  import notOwnXgMbtiResultPage from './not-own-xg-mbti-result-page.vue'
  import {
    debounce
  } from 'lodash'
  import {mapState} from 'vuex'
  
  const appData = getApp();
  // this.pageComp = 'pageOCEAN'
  export default {
    components: {
      CustomSclResultMBTI,
      CustomSclResultOCEAN,
      NotOwnResultPageVue,
      notOwnLoveMbtiResultPage,
      notOwnXgMbtiResultPage
    },
    data() {
      return {
        stickTop: appData.globalData.topHeight * 2,
        reportId: '',
        sclId: '',
        fromHistory: false,
        sclInfo: {},
        reportInfo: {},
        pageData: {}, //测评结果渲染的数据（清洗后的）
        staticImgs: {
          topBg: this.imgBaseURL + '/scl/result/multipack/mbti/bg.png',
          // borderBg: this.imgBaseURL + '/scl/result/multipack/mbti/border-bg.png',
          borderBg: this.imgBaseURL + '/scl/result/multipack/mbti/border-bg-test.jpg',
          smallBorderBg: this.imgBaseURL + '/scl/result/multipack/mbti/border-bg-small.png',
          lockIcon: this.imgBaseURL + '/scl/result/multipack/mbti/lock-icon.png',
          lockImg: this.imgBaseURL + '/scl/result/multipack/mbti/lock-img.png',
          defBoxBg: this.imgBaseURL + '/scl/result/multipack/mbti/love-MBTI.png',
          xgDefBoxBg:this.imgBaseURL + '/scl/result/multipack/mbti/xg-MBTI.jpg',
          actBoxBg: this.imgBaseURL + '/scl/result/multipack/mbti/job-MBTI.png',
          
          testImg: this.imgBaseURL + '/scl/result/multipack/mbti/small-ENFJ.jpg',
          testImg1: this.imgBaseURL + '/scl/result/multipack/mbti/job-ENFJ.png',
          
          smallTestImg: this.imgBaseURL + '/scl/result/multipack/mbti/small/ENFJ.png',
          smallTestImg1: this.imgBaseURL + '/scl/result/multipack/mbti/small/mbti.jpg',
          
          tipBg: this.imgBaseURL + '/scl/result/multipack/mbti/tip-bg-233.png',
        },
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "我的MBTI",
          "hasEntity": true,
        },
        scrollTopNum:0,
        actBoxIndex: 0,
        pageComp: "",
        multipackList:[
          {
            sclId:'',
            reportId:'',
            hasOwn:false,
            boxTit:'性格MBTI',
            code:'character_mbti',
            img:'',
            multipackResultImg:'',
            multipackResultSmallImg:'',
            data:{
              pageComp:'def-xg',
            },
            bg:this.imgBaseURL + '/scl/result/multipack/mbti/bg-xg.png',
            defBoxBg: this.imgBaseURL + '/scl/result/multipack/mbti/lack-xg-img-1.png',
          },
          {
            sclId:'',
            // sclId:'1810937237950763010',
            reportId:'',
            hasOwn:false,
            boxTit:'恋爱MBTI',
            code:'love_mbti',
            img:'',
            multipackResultImg:'',
            multipackResultSmallImg:'',
            data:{
              pageComp:'def-love',
            },
            bg:this.imgBaseURL + '/scl/result/multipack/mbti//bg-love.png',
            defBoxBg: this.imgBaseURL + '/scl/result/multipack/mbti/lack-love-img-1.png',
          },
          {
            sclId:'',
            // sclId:'1742826100431507457',
            reportId:'',
            hasOwn:false,
            boxTit:'职业MBTI',
            code:'job_mbti',
            img:'',
            multipackResultImg:'',
            multipackResultSmallImg:'',
            data:{
              pageComp:'def',
            },
            bg:this.imgBaseURL + '/scl/result/multipack/mbti//bg-job.png',
            defBoxBg: this.imgBaseURL + '/scl/result/multipack/mbti/lack-job-img-1.png',
          },
          
        ],
        smallMenuTopNum:999,
        smallMenuVisible:false,
        qstnNum:null,
        isDisPay:false,
        pageLoading:false,
        loadDataOk:false,
      }
    },
    computed: {
      jobMbtiDone(){
        return !!this.multipackList[0].reportId
      },
      loveMbtiDone(){
        return !!this.multipackList[1].reportId
      },
      isShowPage() {
        return true
      },
      loveSclId(){
        return this.multipackList[1].sclId
      },
      jobSclId(){
        return this.multipackList[1].sclId
      },
      actBoxCode(){
        return this.multipackList[this.actBoxIndex].code
      },
      lackSclId(){
        return this.multipackList[this.actBoxIndex].sclId
      },
      lackHasOwn(){
        return this.multipackList[this.actBoxIndex].hasOwn
      },
      topBg(){
        return this.multipackList[this.actBoxIndex].bg
      },
      ...mapState({
        member: state => state.user.member
      })
    },
    onLoad(opt) {
      this.reportId = opt.reportId
      this.sclId = opt.sclId
      this.fromHistory = opt.fromHistory
      this.initPageData()
      
      this.$nextTick(()=>{
        this.getTopMenuHeight()
      })
       
    },
    methods: {
      toSclList(){
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      toPayScl:debounce(async function(){
        if (this.member.userMemberStatus === 2) {
          // 是会员无需支付
          this.toDoScl()
          return
        }
        if (this.pageLoading) {
          return
        }
        let that = this;
        
        this.pageLoading = true
        
        const tmpObj = this.multipackList.find(item=>item.code == 'character_mbti')
        let tmpSclId = tmpObj.sclId
        
        const params = removeEmptyProperty({
          orderType: '7',
          sclId: tmpSclId,
          adClickId: uni.getStorageSync('adClickId'),
          qstnNum:'100'
        })
        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: tmpObj.sclId
        })
        params.sclPayToken = tmpRes.data
        this.$u.api.orderPay(params).then(res=>{
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                // afterFn(fRes)
                that.$showToast('支付成功');
                that.toDoScl()
                setTimeout(()=>{
                  that.pageLoading = false
                },300)
              },
              fail: function(err) {
                that.$showToast('支付取消');
                setTimeout(()=>{
                  that.pageLoading = false
                },300)
              }
            })
          }else {
            that.$showToast(res.data.message);
            reject()
          }
        }).catch((e) => {
          setTimeout(()=>{
            this.pageLoading = false
          },300)
        })
        
      },400),
      toDoScl(){
        const tmpObj = this.multipackList.find(item=>item.code == 'character_mbti')
        let tmpSclId = tmpObj.sclId
        uni.redirectTo({
          url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
            sclId:tmpSclId,
            reportId: tmpObj.reportId,
            qstnCode:100
          })
        })
      },
      toTheTop(index){
        uni.pageScrollTo({
            duration: 300,
            scrollTop:0
        });
        
        setTimeout(()=>{
          this.changeBox(index)
        },300)
      },
      getTopMenuHeight(){
        const that=this;
              
        const query = uni.createSelectorQuery().in(that);
        query.select('.top-stick-wrapper').boundingClientRect(data => {
        
          console.log(data,'===getTopMenuHeight==data')
          this.smallMenuTopNum = data.height
          // if(that.scrollTopNum > data.top){
          //   that.showPopup = true
          // }else{
          //   that.payHandle()
          // }
            
        }).exec();
      },
      changeSclStatus(){
        this.multipackList[this.actBoxIndex].hasOwn = true
      },
      changeBox(index) {
        if(index == this.index){
          return this.$showToast('当前已是该类型结果')
        }
        if(this.multipackList[index].data){
          if(this.multipackList[index].code == "character_mbti" && this.multipackList[index].data.pageComp != 'mbti'){
            console.log(this.multipackList[index].data,'------this.multipackList[index].data')
              this.pageComp = this.multipackList[index].sclId ? 'def-xg'  : 'def'
          }else{
            this.pageComp =  this.multipackList[index].data.pageComp  
          }
          console.log(this.multipackList[index],'-----this.multipackList[index]----')
          // def-xg
          
          this.pageData = this.multipackList[index].data.data  
          
        }
         
        this.actBoxIndex = index
      },
      percentValue(current, max) {
        if (max === 0) {
          // 防止除以零
          return 0
        }
        return (current / max) * 100
      },
      processResultData(dData) {
        console.log('----------------------processResultData----------------------------')
        const result = dData.resultList[0]
        const conclusionArr = result.resultTitle.split("——")
        
        console.log(dData.sclReportJson,'-------sclReportJson')
        
        if(dData.sclReportJson){
          const tmpObj = JSON.parse(dData.sclReportJson)
          this.qstnNum = tmpObj.qstnNum
          this.isDisPay = tmpObj.isDisPay == 'Y' 
        }

        let mainResult
        let recommendJobImg
        let maxNumArr
        try {
          mainResult = unescape(result.resultDesc)
          console.log(mainResult,'-----mainResult')
          // debugger
          mainResult = JSON.parse(mainResult)
          if(result?.modelDescList[4]){
            recommendJobImg = result.modelDescList[4].modelDesc.match(/"([^"]*)"/)[0]
            recommendJobImg = recommendJobImg.replace(/"/g, '')
          }
        } catch (e) {
          this.$showToast("结果异常,请联系客服")
          // debugger
          return setTimeout(() => {
            uni.reLaunch({
              url: '/pages/sclList/sclList'
            })
          }, 2000)
        }

        //常模信息
        const commonModel = JSON.parse(dData.normUrl)
        console.log(dData, '====== processResultDataToRenderDataPageMBTI')

        let scoreArr = []
        const scoreLabelArr = ['精力支配', '认识世界', '判断事物', '生活态度']
        const mbtidDict = {
          I: '内倾',
          E: '外倾',
          S: '实感',
          N: '直觉',
          T: '理智',
          F: '情感',
          J: '判断',
          P: '理解',
        }
        const mbtidDict_1 = {
          T: '动荡',
          A: '自信'
        }
        const maxScores = {
          "JP": 22,
          "SN": 26,
          "IE": 21,
          "TF": 24
        }

        // 取前8个元素
        const firstEightElements = dData.dmnsList.slice(0, 8);
        const groupedArray = [];
        for (let i = 0; i < firstEightElements.length; i += 2) {
          groupedArray.push(firstEightElements.slice(i, i + 2));
        }
        
        
        function tmpFunc(paramArr,maxScores,scoreLabelArr,mbtidDict,percentValue){
          let scoreArr = []
          for (let i = 0; i < paramArr.length; i++) {
            console.log(paramArr,'------paramArr------paramArr----paramArr')
            const item = paramArr[i][0]
            const element = paramArr[i][1]
            
            let maxNum = 0
            // 查找包含变量 I 值的键并输出对应的值
            for (const key in maxScores) {
              console.log(key,'--------------keyy----------')
              if (key.includes(element.dmnsName)) {
                maxNum = maxScores[key]
              }
            }
            
            const obj1 = {
              label: mbtidDict[element.dmnsName] + `(${element.dmnsName})`,
              num: 100 - percentValue(element.dmnsScore, maxNum),
              originNum: percentValue(element.dmnsScore, maxNum),
            }
            const obj2 = {
              label: mbtidDict[item.dmnsName] + `(${item.dmnsName})`,
              num: percentValue(item.dmnsScore, maxNum),
              originNum: percentValue(item.dmnsScore, maxNum),
            }
            
            scoreArr.push({
              label: scoreLabelArr[i],
              actIndex: obj1.originNum > obj2.originNum ? 0 : 1,
              arr: [
                obj1,
                obj2
              ]
            })

          }
          
          return scoreArr
        }
        
        console.log(groupedArray,maxScores,scoreLabelArr,'-=====groupedArray,maxScores======')
        
        scoreArr = tmpFunc(groupedArray,maxScores,scoreLabelArr,mbtidDict,this.percentValue)
        
        console.log(scoreArr,'-----scoreArr----')
        
        if(dData.dmnsList.length>8){
          //再取后两个
          const lastTwoElements = dData.dmnsList.slice(-2);
          
          
          scoreArr = [...scoreArr,...tmpFunc([lastTwoElements],{'AT':200},['身份认同'],mbtidDict_1,this.percentValue)]
          console.log(scoreArr,'------scoreArr-----')
        }
        

        dData.createDate = Number(dData.createDate)
        
        let normalComData
        
        if(commonModel[1]){
          normalComData = {
            tit: commonModel[0],
            img: commonModel[1]
          }
        }else {
          normalComData = {
            tit:'人群中不同性格类型水平分布图',
            img:mainResult.fbImg
          }
        }
        
        return {
          id: this.reportId,
          name: dData.sclName,
          serialNumber: dData.serialNumber,
          conclusion1: conclusionArr[1],
          conclusion2: conclusionArr[0],
          sclTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          normComparison: normalComData,
          scoreArr: scoreArr,
          mainResult: mainResult,
          multipackResultImg:mainResult.multipackResultImg,
          multipackResultSmallImg:mainResult.multipackResultSmallImg,
          recommendJobImg: recommendJobImg,
          referenceList: mainResult.referenceList
        }

      },
      setActIndex(){
        //查找multipackList里符合sclId为sclId的索引，赋给actBoxIndex
        console.log(this.multipackList,'======this.multipackList=====',this.sclId)
        this.actBoxIndex = this.multipackList.findIndex(item => item.sclId == this.sclId)
      },
      initPageData() {
        console.log('----------------------getReport----------------------------')
        Promise.all([
          this.$u.api.getReportInfo({
            reportId: this.reportId
          }),
          this.$u.api.getSclInfo(removeEmptyProperty({
            sclId: this.sclId,
            reportId: this.reportId,
            code:this.$store.state.user.actCouponCode
          }))
        ]).then(([reportRes,sclRes]) => {
          this.initMultipackData(sclRes.data,reportRes.data)
        })
      },
      async initMultipackData(sclRes,reportRes) {
        const res = reportRes.data
        const mainResultD = JSON.parse(sclRes.data.scloReportDetail) || {}
        console.log(mainResultD,'======mainResultD========')
        const tmpMultipackList = mainResultD.scl_mbti_list || {}
        
        //设置当前的
        if (res.specialType == 'mbti') {
            this.pageComp = 'mbti'
            this.pageData = this.processResultData(res)  
        } else if (mainResultD && JSON.stringify(mainResultD) != '{}') {
          this.pageComp = 'pageOCEAN'
          this.pageData = this.processResultDataToRenderDataOCEAN(res, mainResultD)
        }
        
        const promises =  this.multipackList.map(async item=>{
          console.log(tmpMultipackList,'-----sclId-----',item)
          
          // console.log('----tmpMultipackList[item.code]----',tmpMultipackList[item.code])
          item.hasOwn = tmpMultipackList[item.code].status > 1
          item.sclId = tmpMultipackList[item.code].scl_id
          
          if(tmpMultipackList[item.code].report_id){
            item.hasOwn = true
            item.reportId = tmpMultipackList[item.code].report_id
            item.sclId = tmpMultipackList[item.code].scl_id
            
            if(tmpMultipackList[item.code].report_id  != this.reportId){
              item.data = await this.getReportById(item.sclId,item.reportId,item.code)
              // console.log(item.data,'====item.data')
              item.data = JSON.parse(JSON.stringify(item.data))
              // console.log(JSON.stringify(item.data))
              console.log(item.data,'-----item.data.multipackResultSmallImg')
              item.multipackResultSmallImg = item.data.data.multipackResultSmallImg
              item.multipackResultImg = item.data.data.multipackResultImg
              
              console.log(item,'-------------item---------')
            }
          }
          
        })
        
        console.log(promises,'-----dd')
        
        await Promise.all(promises)
        console.log(this.multipackList,'======this.multipackList')
      
        this.setActIndex()
        this.multipackList[this.actBoxIndex].data = {
          data:this.pageData,
          pageComp:this.pageComp
        }
        
    
        console.log(this.actBoxIndex,'====this.actBoxIndex')
        this.multipackList[this.actBoxIndex].reportId = this.reportId
        this.multipackList[this.actBoxIndex].multipackResultImg = this.pageData.multipackResultImg
        this.multipackList[this.actBoxIndex].multipackResultSmallImg = this.pageData.multipackResultSmallImg
        
        
        
        this.loadDataOk = true
        console.log(this.multipackList,'======this.multipackList')
        
      },
      async getReportById(sclId,reportId,code){
        const {
          data: reportRes
        } = await this.$u.api.getReportInfo({
          reportId: reportId
        })
        
        const {
          data: sclRes
        } = await this.$u.api.getSclInfo(removeEmptyProperty({
          sclId: this.sclId,
          reportId: this.reportId,
          code:this.$store.state.user.actCouponCode
        }))
        
        const res = reportRes.data
        const mainResultD = JSON.parse(sclRes.data.scloReportDetail) || {}
        const tmpMultipackList = mainResultD.scl_mbti_list || {}
        
        console.log('-----------getReportById：',sclId,tmpMultipackList)
        if (res.specialType == 'mbti') {      
          return {
            pageComp:'mbti',
            data: this.processResultData(res)
          }
        } else if (mainResultD && JSON.stringify(mainResultD) != '{}') {
          return {
            pageComp:'pageOCEAN',
            data: this.processResultDataToRenderDataOCEAN(res, mainResultD)
          }
        }
        
      },
      processResultDataToRenderDataOCEAN(dData, mainResultD) {
        //维度信息
        let tmpScoreArr = []

        //最终结论
        let conclusion = ''

        let subConclusion = ''

        //常模数据
        let commonModelData = []

        //常模对象
        let normComparison = null

        //建议
        let suggestions = null
        
        let multipackResultImg = ''
        let multipackResultSmallImg = ''

        let totalScore = 0

        //结果详解
        let detailedResults = {
          contentArr: []
        }

        let mainImg = ''

        let tmpPushResultArr = []
        // const tmpResultContentArr = []

        const myRadarDataStrArr = []
        const myRadarDataScoreArr = []
        console.log(mainResultD, '=====mainResultD====')

        if (mainResultD.cutIndex) {
          //根据score,由大到小排序，然后截取
          dData.resultList = dData.resultList.sort((a, b) => b.score - a.score)
          dData.resultList = dData.resultList.slice(0, mainResultD.cutIndex)
        }


        if (mainResultD.useCustomAlgorithmToMainConculsion) {
          const conclusionObj = this.calculateConclusion(mainResultD.mainAlgorithmJson, dData.resultSetMap)
          if (conclusionObj) {
            console.log(conclusionObj, '=======conclusionObj')
            conclusion = conclusionObj.conclusion
            subConclusion = conclusionObj.subConclusion
            tmpPushResultArr = conclusionObj.detailedResults.contentArr
            suggestions = conclusionObj.detailedResults.suggestions
            mainImg = conclusionObj.mainImg
          }
        } else if (mainResultD.useAllCustomAlgorithmToMainConculsion) {
          
        }

        if (mainResultD.useHighestScoreDimensionResult) {
          // 使用最高分值维度的结果
          console.log('----- mainResultD.useHighestScoreDimensionResult -----')
          const findHighestScore = (arr) => {
            if (arr.length === 0) {
              return null; // 返回 null 表示数组为空
            }

            let highestIndex = 0
            let highestScore = arr[highestIndex].myScore // 假设第一个元素是分值最高的
            for (let i = 1; i < arr.length; i++) {
              if (arr[i].myScore > highestScore) {
                highestScore = arr[i].myScore // 更新分值最高的元素
                highestIndex = i
              }
            }
            return arr[highestIndex] // 返回分值最高的元素
          }
          const finalObj = findHighestScore(dData.resultSetMap)
          console.log(finalObj, '---------finalObj')

          dData.resultList.map((item, index) => {
            if (item.dmnsName == finalObj.dmnsName) {

              const tmpObj = JSON.parse(unescape(item.resultDesc))
              detailedResults = tmpObj.detailedResults || {
                contentArr: []
              }
              conclusion = tmpObj.conclusion
              subConclusion = tmpObj.subConclusion
            }

            if (mainResultD.hasRadarGraph) {
              myRadarDataStrArr.push(item.dmnsName)
              myRadarDataScoreArr.push(item.score)
            }
          })

        } else if (mainResultD.dimensionsType == '1' && !mainResultD.useAllCustomAlgorithmToMainConculsion) {
          tmpScoreArr = dData.resultList.map((item, index) => {
            console.log(item, '=======item')
            if (index === 0) {
              if (mainResultD.useFirstResultConclusion) {
                totalScore = item.score
                console.log(item.resultDesc, '===item.resultDesc')
                const tmpObj = JSON.parse(unescape(item.resultDesc))
                conclusion = tmpObj.conclusion
                subConclusion = tmpObj.subConclusion
                detailedResults = tmpObj.detailedResults || {}
                multipackResultImg = tmpObj.multipackResultImg
                multipackResultSmallImg = tmpObj.multipackResultSmallImg
                console.log(tmpObj.suggestions, '===========tmpObj.suggestions')
                // 判断tmpObj.suggestions是否是对象

                try {
                  suggestions = tmpObj.suggestions ? JSON.parse(tmpObj.suggestions) : null
                } catch (e) {
                  suggestions = this.$lodash.isObject(tmpObj.suggestions) ? tmpObj.suggestions : null
                }
                suggestions = this.$lodash.isEmpty(suggestions) ? null : suggestions
              } else if (mainResultD.useCustomAlgorithmResults) {
                console.log('使用自定义算法计算')

                // const tmpObj = JSON.parse(unescape(item.resultDesc))
                const finalMainResult = this.determineSexualOrientation(dData.resultSetMap, mainResultD
                  .algorithmJson)
                console.log(finalMainResult, '=========finalMainResult')
                conclusion = '您的性取向是：' + finalMainResult.conclusion
                detailedResults = finalMainResult.detailedResults
                mainImg = finalMainResult.mainImg
                // console.log(rrr,'=======rrr')
              }
            }

            if (mainResultD.hasRadarGraph || mainResultD.useSubCompContent) {
              myRadarDataStrArr.push(item.dmnsName)
              myRadarDataScoreArr.push(item.score)

              if (mainResultD.hasCommonModelRadarData) {
                console.log(item.dmnsName, '-----------item.dmnsName')
                if (item.dmnsName) {
                  console.log(mainResultD.commonModelRadarData, '=========mainResultD.commonModelRadarData')
                  const currentHeathNum = mainResultD.commonModelRadarData.find(node => item.dmnsName === node
                    .key).data
                  commonModelData.push(currentHeathNum)
                }

              }

              console.log('--mainResultD.hasRadarGraph--', detailedResults)

              try {
                const parseObj = JSON.parse(unescape(item.resultDesc))
                console.log(parseObj, '================parseObj')
                const tmpResultContentArr = parseObj.contentArr
                if (!detailedResults.contentArr) {
                  detailedResults.contentArr = []
                }
                console.log(tmpResultContentArr, '========================tmpResultContentArr')

                detailedResults.contentArr.push({
                  tit: item.dmnsName,
                  contentArr: tmpResultContentArr,
                  hasLine: true
                })
              } catch (e) {

              }
            }

            if (mainResultD.scoreInfoType == '1') {
              if (index === 0 && (mainResultD.useFirstResultConclusion || mainResultD
                .useCustomAlgorithmResults)) {
                return {
                  label: "总分",
                  score: item.score,
                  str: item.resultTitle,
                }

              } else {
                return {
                  label: item.dmnsName,
                  score: item.score,
                  str: item.resultTitle,
                }
              }

            } else if (mainResultD.scoreInfoType == '2') {
              const healthScore = JSON.parse(unescape(item.resultDesc)).healthScore
              return {
                score: item.score,
                healthScore
              }
            } else if (mainResultD.scoreInfoType == '3') {
              if (index === 0 && (mainResultD.useFirstResultConclusion || mainResultD
                .useCustomAlgorithmResults)) {
                return {
                  label: '总分',
                  str: item.score
                }
              } else {
                return {
                  label: item.dmnsName,
                  str: item.score
                }
              }
            } else if (mainResultD.scoreInfoType == '4') {
              console.log(item.resultDesc, '======item.resultDesc')
              const tmpObj = JSON.parse(unescape(item.resultDesc))
              if (index === 0 && mainResultD.useFirstResultConclusion) {
                detailedResults = tmpObj.detailedResults || {}
                detailedResults.contentArr = [] //清空
                return {
                  label: '总分',
                  score: item.score,
                  conclusion: tmpObj.shortConclusion,
                  healthScore: tmpObj.healthScore
                }

              } else {
                console.log(detailedResults, '====detailedResults')
                detailedResults.contentArr.push(
                  tmpObj.detailedResults
                )
                return {
                  label: item.dmnsName,
                  score: item.score,
                  conclusion: tmpObj.shortConclusion,
                  healthScore: tmpObj.healthScore
                }

              }


              // const parseObj = JSON.parse(unescape(item.resultDesc))

            }
          })
        }


        //雷达图信息
        let radarData = null
        if (mainResultD.hasRadarGraph) {
          if (!myRadarDataStrArr[0]) {
            //去除总分的雷达信息
            myRadarDataStrArr.shift()
            myRadarDataScoreArr.shift()
          }
          console.log(myRadarDataStrArr, '-------myRadarDataStrArr')
          radarData = {
            "categories": myRadarDataStrArr,
            "series": [{
              "name": "数据",
              "color": "#FEB069",
              "data": myRadarDataScoreArr,
              "index": 0,
              "pointShape": "square",
              "show": true,
              "labelShow": false,
              "textColor": "rgba(0,0,0,1)",
              "type": "radar"
            }],
            "legend": {
              "show": false
            },
          }

          if (mainResultD.hasCommonModelRadarData) {
            radarData.series[0].color = "#6B77FF"
            radarData.series.push({
              "name": "常模",
              "color": "#FEB069",
              "data": commonModelData,
              "index": 0,
              "pointShape": "square",
              "show": true,
              "labelShow": false,
              "textColor": "rgba(0,0,0,1)",
              "type": "radar"
            })

          }
        }
        console.log(suggestions, '===suggestions')
        dData.createDate = Number(dData.createDate)

        console.log(mainImg, '-------mainImg')

        if (tmpPushResultArr && tmpPushResultArr.length > 0) {
          detailedResults.contentArr = [...detailedResults.contentArr, ...tmpPushResultArr]

          console.log(detailedResults.contentArr, '=============detailedResults.contentArr')
        }
        console.log(mainResultD,
          '===============================mainResultDmainResultDmainResultDmainResultDmainResultD')
        console.log(detailedResults, '=======detailedResults')
        
        console.log(multipackResultImg,multipackResultSmallImg,'----multipackResultSmallImg---multipackResultSmallImg-multipackResultSmallImg')
        //最终完成的破事
        return {
          id: this.reportId,
          serialNumber: dData.serialNumber,
          name: dData.sclName,
          sclTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          createTime: this.$dayjs(dData.createDate).format("YYYY-MM-DD HH:mm"),
          scoreArr: tmpScoreArr,
          firstScore: dData.resultList && dData.resultList[0] && dData.resultList[0].score,
          radarData,
          dimensionsType: mainResultD.dimensionsType,
          scoreInfoType: mainResultD.scoreInfoType,
          hasRadarGraph: mainResultD.hasRadarGraph,
          literatrue: mainResultD.literatrue,
          multipackResultImg,
          multipackResultSmallImg,
          sciencePopularization: mainResultD.sciencePopularization,
          detailedResults,
          conclusion,
          subConclusion,
          suggestions,
          radarMax: mainResultD.radarMax,
          imgAndScoreBlockType: mainResultD.imgAndScoreBlockType,
          otherTipText: mainResultD.otherTipText,
          otherTipImg: mainResultD.otherTipImg,
          mainImg,
          normComparison,
          qsnMax: mainResultD.qsnMax,
          rightQsn: totalScore,
          scoreInfoRightStr: mainResultD.scoreInfoRightStr,
        }


        // console.log(this.pageDataCommon, '====this.pageDataCommon')
      },

    },
    onPageScroll(e) {
      if(e.scrollTop > this.smallMenuTopNum){
        this.smallMenuVisible = true
      }else{
        this.smallMenuVisible = false
      }
      this.scrollTopNum = e.scrollTop
    },
  }
</script>

<style lang="scss" scoped>
  
  .fixed-bottom-nav{
    position: fixed;
    
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    
    display: flex;
    justify-content: center;
    column-gap: 30rpx;
    
    background-color: #fff;
    
    
    .box-btn{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 70rpx;
      text-align: center;
      font-style: normal;
      
      border-radius: 52rpx;
      
      position:relative;
    }
    
    .left-btn{
      background: linear-gradient( 180deg, #FFC693 0%, #FF991D 100%);
      
      width: 250rpx;
      height: 70rpx;
    }
    
    .right-btn{
      background: linear-gradient( 180deg, #FFAA64 0%, #FEB770 50%,#FF6939 100%);
      width: 410rpx;
      height: 70rpx;
      
      .tip-box{
        position: absolute;
        right: 14rpx;
        top: -92rpx ;
        
        background-size: 100% 100%;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        box-sizing: border-box;
        
        padding-top: 12rpx;
        
        width: 382rpx;
        height: 78rpx;
      }
    }
    
    padding-top: 24rpx;
    padding-bottom:calc(14rpx + constant(safe-area-inset-bottom) );
    padding-bottom:calc(14rpx + env(safe-area-inset-bottom) );
  }
  
  .top-stick-wrapper {
    width: 750rpx;
    height: 660rpx;
    box-sizing: border-box;
    padding-top: 158rpx;
    background-repeat: no-repeat;
    background-size: 100%;

    .row-1 {
      // margin-top: 158rpx;
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: bold;
      font-size: 34rpx;
      color: #FFFFFF;
      opacity: 0;
      // line-height: 48rpx;
      text-align: center;
      font-style: normal;
    }

    .row-2 {
      margin-top: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 34rpx;
      color: #FFFFFF;
      opacity: 0;
      // line-height: 48rpx;
      text-align: center;
      font-style: normal;

      margin-bottom: 82rpx;
    }

    .row-3 {
      marigin-top: 62rpx;
    }

    .box-list {
      display: flex;
      justify-content: center;
      column-gap: 14rpx;

      .box-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        justify-content: flex-end;
        content: "";

        // width: 210rpx;
        // height: 100rpx;

        box-sizing: border-box;
        width: 230rpx;
        height: 240rpx;

        background: #9fbbff;


        border-radius: 20rpx;
        // border: 2rpx solid #5A81CA;

        .abs-border {
          position: absolute;
          left: -6rpx;
          top: -17rpx;
          right: -8rpx;
          bottom: -34rpx;
          // width: 234rpx;
          // height: 246rpx;

          .img {
            width: 100%;
            height: 100%;
          }

          // border: 2rpx solid #5A81CA;
          // border-radius: 10rpx;
        }

        .abs-img-lock {
          position: absolute;
          left: 50%;
          bottom: 4rpx;
          transform: translateX(-50%);
          width: 224rpx;
          height: 265rpx;

          .inset-block {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;

            .img-lock {
              position: absolute;
              left: 50%;
              width: 120rpx;
              height: 120rpx;
              transform: translateX(-50%);
              top: 40rpx;
            }

            .abs-text {
              left: 0;
              right: 0;
              bottom: 82rpx;
              position: absolute;

              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 30rpx;
              color: #FFFFFF;
              line-height: 42rpx;
              letter-spacing: 1px;
              text-align: center;
              font-style: normal;

              // margin-bottom: 28rpx;
            }
          }

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .abs-img {
          position: absolute;
          left: 50%;
          bottom: 4rpx;
          transform: translateX(-50%);
          width: 230rpx;
          height: 320rpx;

          .img {
            width: 100%;
            height: 100%;
          }
        }


        .text-box {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 50rpx;
          
          border-radius: 0 0 20rpx 20rpx;


          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 30rpx;
          color: #333435;
          background: #F4F7FD;
          line-height: 50rpx;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
        }
      }
    }
  }
  
@keyframes showDivAni{
	0%{opacity:0;}
	100%{opacity: 1;}
	
}


  .top-stick-wrapper-small {
    background: linear-gradient( 180deg, #34159A 0%, rgba(139,118,255,0.87) 100%);
    box-shadow: 0rpx 1rpx 30rpx 0rpx #6C54D4;
    // opacity: 0.85;
    position: fixed;
    top: 0;
    z-index: 1;
    	animation:showDivAni .8s 1;

    

    
    width: 750rpx;
    height: 190rpx;
    
    .box-list {
      display: flex;
      justify-content: center;
      column-gap: 30rpx;
      margin-top: 64rpx;
      
      .box-item-0{
        background: #9FBBFF;
        border: 2rpx solid #5A81CA;
        box-sizing: border-box;
      }
      .box-item-1{
        background: linear-gradient( 180deg, #9178D3 0%, #E8C1F8 100%);
        border-radius: 10rpx;
      }
      .box-item-2{
        background: linear-gradient( 180deg, #B4A6DB 0%, #ECBFBE 100%);
        border-radius: 10rpx;
      }
      
      .abs-border {
        position: absolute;
        left: -6rpx;
        top: -6rpx;
        right: -6rpx;
        bottom: -8rpx;
        
        .img {
          width: 100%;
          height: 100%;
        }
      }
      

      .box-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        justify-content: flex-end;
        content: "";

        box-sizing: border-box;
        width: 210rpx;
        height: 100rpx;        
        border-radius: 10rpx;
        
        .abs-img-lock {
          position: absolute;
          left: 50%;

          bottom: 34rpx;
          transform: translateX(-50%);
          width: 110rpx;
          height: 120rpx;

          .inset-block {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;

 

            .abs-text {
              top: 14rpx;
              right: -25px;
              // bottom: 82rpx;
              position: absolute;
              
              width: 80rpx;
              height: 28rpx;
              background: #FFFFFF;
              border-radius: 0rpx 7rpx 0rpx 8rpx;

              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #241089;
              line-height: 28rpx;
              text-align: center;
              font-style: normal;

              // margin-bottom: 28rpx;
            }
          }

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .abs-img {
          position: absolute;
          left: 50%;
          bottom: 34rpx;
          transform: translateX(-50%);
          width: 110rpx;
          height: 120rpx;

          .img {
            width: 100%;
            height: 100%;
          }
        }


        .text-box {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          // height: 50rpx;
          
          // width: 210rpx;
          height: 42rpx;
          background: #FFFFFF;
          border-radius: 0rpx 0rpx 10rpx 10rpx;


          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 30rpx;
          color: #333435;
          line-height: 42rpx;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
        }
      }
    }

  }
</style>